<!-----------游客登录（账号切换）页面------------->
<template>
  <div>
    <topheader :toptitle="toptitle" :goback="goback"/>
    <div class="wrapper user-switch">
      <div class="wrapper-inner">
        <div class="user-switch-save">
          <div class="save-game" @click="saveDesk">保存游戏到桌面</div>
        </div>
        <div class="user-switch-content clearfix">
          <div class="l">
            <img class="l" :src="userInfo.avatar"/>
            <div class="l">
              <p class="user">账号: <span>{{userInfo.account}}</span></p>
              <p class="UID">UID: <span>{{userInfo.uid}}</span></p>
            </div>
          </div>
          <div class="r btn btn-user-switch"><router-link to="/xylogin">切换账号</router-link></div>
        </div>
        <div class="box-greybg"></div>
        <ul class="yk-list switch-list clearfix">
          <li class="yk-list-item">
            <router-link to="/">
              <img src="static/img/icon/icon-pic1.png" alt=""/>
              <span>游戏中心</span>
            </router-link>
          </li>
          <li class="yk-list-item">
            <router-link to="/question">
              <img src="static/img/icon/icon-pic3.png" alt=""/>
              <span>常见问题</span>
            </router-link>
          </li>
          <li class="yk-list-item">
            <router-link to="/rechargerecords">
              <img src="static/img/icon/icon-pic4.png" alt=""/>
              <span>充值记录</span>
            </router-link>
          </li>
          <li class="yk-list-item">
            <router-link to="/usersafe">
              <img src="static/img/icon/icon-pic5.png" alt=""/>
              <span>账号安全</span>
            </router-link>
          </li>
        </ul>
        <p class="server mt80">客服QQ：<span v-text="message"
                                     v-clipboard:copy="message"
                                     v-clipboard:success="onCopy"
                                     v-clipboard:error="onError"></span></p>
      </div>
    </div>
  </div>
</template>

<script>
  import topheader from "@/components/topheader"
  import {Toast} from "mint-ui"
  import apiConfig from "../config/api.js"

  export default {
    name: "userswitch",
    components: {
      "topheader": topheader
    },
    data () {
      return {
        goback: false,
        toptitle: "账户",
        userInfo: {
          account: "",
          uid: "",
          avatar: ""
        },
        message: "800063550"
      }
    },
    created () {
      // 从localStorage获取用户信息
      this.userInfo = userInfoKit.getUserInfo();
      // 如果用户头像地址为空,则显示默认头像
      if (this.userInfo.avatar == null || this.userInfo.avatar == "") {
        this.userInfo.avatar = "/static/img/user-photo.png"
      }
    },
    methods: {
      saveDesk: function(){
        if (commen.getBrowserType() == 'Safari') {
        	//如果是safari浏览器，直接添加到桌面
		       this.$router.push('/save');
		    } else {
		    	//如果不是safari浏览器，复制链接去safari浏览器打开
		       this.$router.push('/gotosafari');
		    }
      },
      onCopy: function (e) {
        let instance = Toast({
          message: "复制成功",
          position: "middle",
          duration: 5000,
          iconClass: "icon icon-success", // icon 图标的类名
          className: "addClass" // Toast 的类名。可以为其添加样式
        })
        setTimeout(() => {
          instance.close()
        }, 2000)
      },
      onError: function (e) {
        let instance = Toast({
          message: "该浏览器不支持自动复制",
          position: "middle",
          duration: 5000
        })
        setTimeout(() => {
          instance.close()
        }, 2000)
      }
    }
  }
</script>
